'use client'

import { useState, useMemo } from 'react'
import Image from 'next/image'
import Overlay from '@/src/app/components/overlay'
import Modal from '@/src/app/components/modal'
import Schema from 'async-validator'
import { fetcher } from '@/src/utils/fetcher'
import { objectToQueryString } from '@/src/utils/object-to-query-string'

import formBg from '@/public/form_bg.png'
import formBgPC from '@/public/form_bg_pc.png'
import pointerIcon from '@/public/pointer_right_white.png'
import profileIcon from '@/public/profile_orange.png'
import phoneIcon from '@/public/phone_orange.png'
import emailIcon from '@/public/email_orange.png'
import docIcon from '@/public/doc_orange.png'
import arrowIcon from '@/public/arrow_right_orange.png'
import { submit } from '@/src/app/actions/submit'

interface FormProps {
  m: {
    title: string
    desc: string
    namePlaceholder: string
    phonePlaceholder: string
    emailPlaceholder: string
    contentPlaceholder: string
    submit: string
    modalTitle: string
    modalContent: string
  }
}

const Form: React.FC<FormProps> = (props) => {
  const { m } = props
  const [isShowSuccessModal, setIsShowSuccessModal] = useState(false)

  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    content: '',
  })

  const validator = useMemo(() => {
    const rules = {
      name: {
        type: 'string',
        required: true,
        message: 'Your name is required.',
      },
      phone: {
        type: 'string',
        required: true,
        message: 'Phone number is required.',
      },
      email: {
        type: 'string',
        required: true,
        message: 'Email is required.',
      },
      content: {
        type: 'string',
        required: true,
        message: 'Consulation content is required.',
      },
    }

    const validator = new Schema(rules as any)

    return validator
  }, [])

  const handleInput = (value: string, field: string) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

  const handleSubmit = async () => {
    validator.validate(formData, async (errors, fields) => {
      if (errors) {
        alert(errors[0].message)
        return
      }

      const result = await submit({ ...formData, type: 'home' })

      if (result) {
        setIsShowSuccessModal(true)
        setFormData({ name: '', phone: '', email: '', content: '' })
      } else {
        alert('Error')
      }
    })
  }

  return (
    <>
      <section className='relative px-[0.9375rem] pt-[1.125rem] pb-[1.375rem] mx-[0.9375rem] lg:max-w-[1200px] 2xl:max-w-[1680px] lg:mx-auto lg:px-0 lg:pt-[2.6875rem] lg:pb-[3.375rem] 2xl:pt-[4.0625rem] 2xl:pb-[5.0625rem]'>
        {/* 背景图片 */}
        <div className='lg:hidden absolute top-0 bottom-0 left-0 right-0'>
          <Image
            src={formBg}
            alt='formBg'
            fill
            sizes='(max-width: 1024px) 92vw'
          />
        </div>
        <div className='hidden lg:block absolute top-0 bottom-0 left-0 right-0'>
          <Image
            src={formBgPC}
            alt='formBg'
            fill
            sizes='(max-width: 1024px) 92vw'
          />
        </div>
        <div className='relative z-10 flex flex-col lg:flex-row lg:justify-between lg:items-end lg:px-[7.5rem] 2xl:px-[15rem]'>
          {/* 图标、标题、简介 */}
          <div className='flex flex-col'>
            {/* 图标 */}
            <div className='relative w-[1.3125rem] h-[0.9375rem] lg:w-[1.75rem] lg:h-[1.25rem] 2xl:w-[2.625rem] 2xl:h-[1.875rem]'>
              <Image
                src={pointerIcon}
                alt='pointer icon'
                fill
                sizes='(max-width: 1024px) 1.3125rem'
              />
            </div>
            <div className='h-3 lg:h-[1.875rem] 2xl:h-11' />
            <div className='flex flex-col lg:justify-between lg:h-[11.8125rem] 2xl:h-[17.75rem]'>
              {/* 标题 */}
              <div className='text-[1.0625rem] leading-[1.6875rem] text-white font-bold lg:text-[1.6875rem] lg:leading-[2.25rem] lg:max-w-[15.8125rem] 2xl:text-[2.5rem] 2xl:leading-[3.375rem] 2xl:max-w-[23.75rem]'>
                {m.title}
              </div>
              {/* 简介 */}
              <div className='text-[0.75rem] leading-[1.1875rem] text-white text-opacity-70 lg:text-[1rem] lg:leading-[1.5625rem] lg:max-w-[15.1875rem] 2xl:text-[1.5rem] 2xl:leading-[2.375rem] 2xl:max-w-[22.75rem]'>
                {m.desc}
              </div>
            </div>
          </div>
          <div className='h-[1.09375rem] lg:hidden' />
          {/* 表单 */}
          <div className='grid grid-cols-1 gap-[1.0625rem] lg:gap-[1.5rem] 2xl:gap-[2.125rem] lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-3 lg:min-w-[32.75rem] lg:h-[11.8125rem] 2xl:min-w-[49rem] 2xl:h-[17.75rem]'>
            {/* 姓名字段 */}
            <div className='flex items-center pl-[0.375rem] bg-white lg:pl-[0.9375rem]'>
              <div className='flex-shrink-0 relative w-[1.3125rem] h-[1.3125rem] lg:w-[1.1875rem] lg:h-[1.3125rem] 2xl:w-10 2xl:h-10'>
                <Image
                  src={profileIcon}
                  alt='profile icon'
                  fill
                  sizes='(max-width: 1024px) 1.3125rem'
                />
              </div>
              <input
                value={formData.name}
                className='outline-none pl-1 py-[0.625rem] lg:pl-3 w-full text-[0.875rem] 2xl:text-[1.125rem] leading-[1rem] text-black placeholder:text-[#999999]'
                type='text'
                placeholder={m.namePlaceholder}
                onInput={(e) =>
                  handleInput((e.target as HTMLInputElement).value, 'name')
                }
              />
            </div>
            {/* 手机号字段 */}
            <div className='flex items-center pl-[0.375rem] bg-white lg:pl-[0.9375rem]'>
              <div className='flex-shrink-0 relative w-[1.3125rem] h-[1.3125rem] lg:w-[1.1875rem] lg:h-[1.3125rem] 2xl:w-10 2xl:h-10'>
                <Image
                  src={phoneIcon}
                  alt='profile icon'
                  fill
                  sizes='(max-width: 1024px) 1.3125rem'
                />
              </div>
              <input
                value={formData.phone}
                className='outline-none pl-1 py-[0.625rem] lg:pl-3 w-full text-[0.875rem] 2xl:text-[1.125rem] leading-[1rem] text-black placeholder:text-[#999999]'
                type='text'
                placeholder={m.phonePlaceholder}
                onInput={(e) =>
                  handleInput((e.target as HTMLInputElement).value, 'phone')
                }
              />
            </div>
            {/* 邮箱字段 */}
            <div className='flex items-center pl-[0.375rem] bg-white lg:pl-[0.9375rem]'>
              <div className='flex-shrink-0 relative w-[1.3125rem] h-[1.3125rem] lg:w-[1.1875rem] lg:h-[1.3125rem] 2xl:w-10 2xl:h-10'>
                <Image
                  src={emailIcon}
                  alt='profile icon'
                  fill
                  sizes='(max-width: 1024px) 1.3125rem'
                />
              </div>
              <input
                value={formData.email}
                className='outline-none pl-1 py-[0.625rem] lg:pl-3 w-full text-[0.875rem] 2xl:text-[1.125rem] leading-[1rem] text-black placeholder:text-[#999999]'
                type='text'
                placeholder={m.emailPlaceholder}
                onInput={(e) =>
                  handleInput((e.target as HTMLInputElement).value, 'email')
                }
              />
            </div>
            {/* 内容字段 */}
            <div className='row-span-2 flex items-start pl-[0.375rem] lg:pl-[0.9375rem] bg-white'>
              <div className='flex-shrink-0 relative w-[1.3125rem] h-[1.3125rem] my-[0.6rem] lg:my-[0.9rem] 2xl:w-10 2xl:h-10'>
                <Image
                  src={docIcon}
                  alt='profile icon'
                  fill
                  sizes='(max-width: 1024px) 1.3125rem'
                />
              </div>
              <textarea
                value={formData.content}
                className='resize-none outline-none pl-1 lg:pl-3 w-full h-full py-[0.6rem] text-[0.875rem] 2xl:text-[1.125rem] text-black placeholder:text-[#999999] min-h-[5.46875rem] lg:py-[0.9rem] 2xl:py-[1.4rem]'
                placeholder={m.contentPlaceholder}
                onInput={(e) =>
                  handleInput((e.target as HTMLInputElement).value, 'content')
                }
              />
            </div>
            {/* 提交按钮 */}
            <button
              className='mt-[0.71875rem] lg:mt-0 flex items-stretch'
              onClick={handleSubmit}
            >
              <div className='flex-grow-1 flex justify-center items-center w-full py-[0.7rem] bg-[#FF7353] text-[1rem] 2xl:text-[1.5rem] text-white font-bold hover:bg-[#EB5634] transition-colors duration-200'>
                {m.submit}
              </div>
              <div className='flex-shrink-0 w-[2.8125rem] lg:w-[3.75rem] 2xl:w-[5.625rem] px-[1rem] py-[0.9375rem] bg-white flex justify-center items-center'>
                <div className='relative w-[0.75rem] h-[0.65625rem] lg:w-4 lg:h-[0.875rem] 2xl:w-6 2xl:h-[1.3125rem]'>
                  <Image
                    src={arrowIcon}
                    alt='arrow icon'
                    fill
                    sizes='(max-width: 1024px) 0.75rem'
                  />
                </div>
              </div>
            </button>
          </div>
        </div>
      </section>
      <Overlay isOpen={isShowSuccessModal} setIsOpen={setIsShowSuccessModal}>
        <Modal
          setIsOpen={setIsShowSuccessModal}
          title={m.modalTitle}
          content={m.modalContent}
        />
      </Overlay>
    </>
  )
}

export default Form
